<!DOCTYPE html>
<html>
<head>
  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">  

  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }


//$(document).ready(function(){
  
  // iniciando las cosas
  //initialize();
//}
 </script>   
 <script type="text/javascript" src="/javascript/jquery-latest.js"></script>
 <script type="text/javascript" src="/javascript/jquery.lightbox_me.js"></script>
 <script type="text/javascript">
 
    //var base_url = "http://localhost:8000/zipbi/";
    var base_url = "http://zipbiosis.appspot.com/zipbi/";
    var map;
    
    var currLatti;
    var currLongi;
    
    function redrawMap(lat,lng){
      var latlng = new google.maps.LatLng(lat, lng);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    }
    
    function addMarker(lat,lng, txtLabel){
      
      var myLatlng = new google.maps.LatLng(lat, lng);
      
      // adds a marker to the existing map
      var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map, 
        title:txtLabel
      }); 
    }
    
    function singleMark(zipcode){
      
      next_url = base_url + 'geoPosRequest/';
      
      $.post(next_url,
              {pos:zipcode},
              function (data){         
                $('#msgBox').show();     
                status = data.status;
                $('#msgBox').html('adding marker: ' + zipcode + " google status:" + status);
                var lati = data.results[0].geometry.location.lat;
                var longi = data.results[0].geometry.location.lng;
                var typeSearch = data.results[0].geometry.location_type;
                
                addMarker(lati,longi,zipcode);           
                
                // cleanup
                $('#marker').attr('value','');
                $('#marker').focus();
                
              },
              "json");

      
      
      
    }
    
    
    function processZipCode(zipcode){
      
      next_url = base_url + 'geoPosRequest/';
      
      $.post(next_url,
              {pos:zipcode},
              function (data){         
                $('#msgBox').show();     
                status = data.status;
                $('#msgBox').html('setting map ' + zipcode + ' as init' + status);
                var lati = data.results[0].geometry.location.lat;
                var longi = data.results[0].geometry.location.lng;
                var typeSearch = data.results[0].geometry.location_type;
                
                redrawMap(lati,longi);           
                
              },
              "json");
      
    }
 
   function sendRequest(){
     
     // now we do the ajax magic
     var vpos = $('#positions').val();
     
     processZipCode(vpos);
     
     
   }
 
  $(document).ready(function(){
    
      $('#msgBox').hide();
      
      $('#box').hide();
  
  // iniciando las cosas
      $('#geoForm').submit(function(){
        
        sendRequest();
        return false;
      });
      
      $('#addMarkerBtn').click(function(){
        var zipcode = $('#marker').val();
        singleMark(zipcode);
      });
      
      $('#massive').click(function(){
         $('#box').lightbox_me(
            {centered: true }
        );
        return false;

      });
      
      $('#sendMaxi').click(function(){
        var zipcodes = $('#maxiZips').val();
        
        var lines = zipcodes.split(/\r\n|\r|\n/);
        
        for(key in lines){
          
          zipcode = lines[key];
          if( zipcode != ""){
            singleMark(zipcode);
          } 
           
        }
        
        return false;
      });
  
  });
 </script>
 <title>GeoPatricia</title>
</head>
<body onload="initialize()">
    <div id="msgBox"></div>
    <div id="map_canvas" style="width:100%; height:90%"></div>
    
    <div>
       <form name="geoForm" id="geoForm" >
         going to:<input id="positions" type="text" name="pos" value="" size="40" />
         <input type="submit" value="set"/>
         <input type="text" id="marker" name="marker" value="" size="80" />
         <input type="button" id="addMarkerBtn" value="AddMarker" />
       </form>
       <input type="button" id="massive" value="maxi" />
    </div>
    
    <div id="box">
      Incluye los zipcodes:<br />
     <form id="multipleZipcodes">
       <textarea id="maxiZips" cols=35 rows=10></textarea>
       <input id="sendMaxi" type="submit" value="send" />
     </form>
    </div>
     
</body>
</html>